<template>
  <div style="padding:20px">
    <div  class="title" >上传凭证<span style="font-size:12px;color:#e5e5e5e">(最多6张)</span></div>
    <div class="imgList">
      <div v-for="(item,index) in imgList" class="imgContain" :key="index">
        <div class="clear" @click="delImg(index)">
          <img src="../../../../static/img/lanhu/43.png" alt style="width: 13px;height: 13px;" @click="sendImg"/>
        </div>
        <img :src="item" alt=""/>
      </div>

      <div v-if="imgList.length < 6" @click="getImgUrl(imgList.length,6)" class="imgContain">
        <img src="../../../../static/img/lanhu/87.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
      refundImage: "",
      imgList: [] // 用于绑定已上传的图片数组（组件内部使用，在删除图片时用到）
    };
  },
  methods: {
    // 获取图片地址后的回调
    callJSGetImgUrl(str) {
      this.imgList = this.imgList.concat(str.split(","));
      this.refundImage = this.imgList.join();
    },
    // 删除图片
    delImg(index) {
      this.imgList.splice(index, 1);
      this.refundImage = this.imgList.join();
    },
    sendImg(){
       this.$emit('func4',this.refundImage)
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    window.callJsGetLocation = this.callJsGetLocation; // 挂载获取地址回调方法
    window.callJSGetImgUrl = this.callJSGetImgUrl; // 挂载获取图片回调方法
  }
};
</script>

<style scoped="" lang="scss">
.a {
  width: 100%;
  position: absolute;
  border: 1px solid #f8f8f8;
}
.d {
  padding: 15px;
  background: #fff;
}
.d_1 {
  font-size: 13px;
  font-weight: bold;
}
.d_2 {
  margin-top: 10px;
}
.title{
  font-size:14px;
  font-weight:bold;
  color:rgba(51,51,51,1);
  margin-bottom: 5px;
}
.imgList:after{content:"";display:block;clear:both;}
.imgList .imgContain{float: left;margin-right: 3%;width:23.5%;margin-bottom: 10px;position: relative;}
.imgList .imgContain img{width: 100%;height: 80px;}
.imgList .imgContain:nth-child(3n){margin-right: 0;}
</style>